<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.0.min.js"></script>
    <script src="jquery-ui-1.12.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="jquery-ui-1.12.0/jquery-ui.css"/>
    <style>
     /*   #menu{
            width: 200px;
        }*/
     /*样式使竖着的菜单变成横着的*/
        .ui-menu:after{
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }
       /* uimenu和每个子选项的设置*/
        .ui-menu .ui-menu-item{
            display: inline-block;
            float: left;
            margin: 0;
            padding: 10px;
            width: auto;
        }
    </style>
</head>
<body>
   <ul id="menu">

       <li>
           <a href="#">java</a>
           <ul>
               <li><a href="#">java1</a></li>
               <li><a href="#">java2</a></li>
               <li><a href="#">java3</a></li>
           </ul>
       </li>
       <li>c</li>
       <li>c++</li>
       <li>php</li>
   </ul>

    <script>

            $(document).ready(function(){
                $("#menu").menu({position:{at:"right bottom"}});  /*默认显示是右上方*/
            });


    </script>
</body>
</html>

